<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>洲博通 - Dashboard  Button UI </title>
  
	<!-- Bootstrap 4.0-->
	<link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
	
	<!-- Bootstrap extend-->
	<link rel="stylesheet" href="../../css/bootstrap-extend.css">

	<!-- Theme style -->
	<link rel="stylesheet" href="../../css/master_style.css">

	<!-- 洲博通 skins -->
	<link rel="stylesheet" href="../../css/skins/_all-skins.css">

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	
</head>
<body class="sidebar-collapse skin-blue sidebar-mini">
  <b data-toggle="push-menu" style="display:none"></b>
<div class="wrapper">



  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Buttons UI
      </h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="breadcrumb-item"><a href="#">UI</a></li>
        <li class="breadcrumb-item active">Buttons</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
		
		<div class="box">
            <div class="box-header">
              <h4 class="box-title">General Buttons</h4>
			  <p class="subtitle mb-0">Using the base class <code>.btn</code> <code>.btn-</code></p>
            </div>
            <div class="box-body">
				<div class="clearfix">
					<button type="button" class="btn btn-default">Default</button>
					<button type="button" class="btn btn-primary">Primary</button>
					<button type="button" class="btn btn-secondary">Secondary</button>
					<button type="button" class="btn btn-info">Info</button>
					<button type="button" class="btn btn-success">Success</button>
					<button type="button" class="btn btn-danger">Danger</button>
					<button type="button" class="btn btn-warning">Warning</button>
				</div>
            </div>
            <!-- /.box -->
          </div>
		
		  <div class="box">
            <div class="box-header">
              <h4 class="box-title">Button with outline</h4>
			  <p class="subtitle mb-0">Using the base class <code>.btn-outline</code></p>
            </div>
            <div class="box-body">
				<div class="clearfix">
					<button type="button" class="btn btn-outline">Default</button>
					<button type="button" class="btn btn-outline btn-primary">Primary</button>
					<button type="button" class="btn btn-outline btn-secondary">Secondary</button>
					<button type="button" class="btn btn-outline btn-info">Info</button>
					<button type="button" class="btn btn-outline btn-success">Success</button>
					<button type="button" class="btn btn-outline btn-danger">Danger</button>
					<button type="button" class="btn btn-outline btn-warning">Warning</button>
				</div>
            </div>
            <!-- /.box -->
          </div>
		
		  <div class="box">
            <div class="box-header">
              <h4 class="box-title">Rounded Buttons</h4>
			  <p class="subtitle mb-0">Using the base class <code>.btn-rounded</code></p>
            </div>
            <div class="box-body">
				<div class="clearfix">
					<button type="button" class="btn btn-rounded">Default</button>
					<button type="button" class="btn btn-rounded btn-primary">Primary</button>
					<button type="button" class="btn btn-rounded btn-secondary">Secondary</button>
					<button type="button" class="btn btn-rounded btn-info">Info</button>
					<button type="button" class="btn btn-rounded btn-success">Success</button>
					<button type="button" class="btn btn-rounded btn-danger">Danger</button>
					<button type="button" class="btn btn-rounded btn-warning">Warning</button>
				</div>
            </div>
            <!-- /.box -->
          </div>
		
		  <div class="box">
            <div class="box-header">
              <h4 class="box-title">Rounded Outline Buttons</h4>
			  <p class="subtitle mb-0">Using the base class <code>.btn-rounded</code><code>.btn-outline</code></p>
            </div>
            <div class="box-body">
				<div class="clearfix">
					<button type="button" class="btn btn-outline btn-rounded">Default</button>
					<button type="button" class="btn btn-outline btn-rounded btn-primary">Primary</button>
					<button type="button" class="btn btn-outline btn-rounded btn-secondary">Secondary</button>
					<button type="button" class="btn btn-outline btn-rounded btn-info">Info</button>
					<button type="button" class="btn btn-outline btn-rounded btn-success">Success</button>
					<button type="button" class="btn btn-outline btn-rounded btn-danger">Danger</button>
					<button type="button" class="btn btn-outline btn-rounded btn-warning">Warning</button>
				</div>
            </div>
            <!-- /.box -->
          </div>
		
		  <div class="box">
            <div class="box-header">
              <h4 class="box-title">Button Sizes</h4>
			  <p class="subtitle mb-0">Using the base class <code>.btn-lg</code><code>.btn-Primary</code></p>
            </div>
            <div class="box-body">
				<div class="clearfix">
					<button type="button" class="btn btn-default">Default Normal</button>
					<button type="button" class="btn btn-primary btn-lg">Primary btn Large</button>
					<button type="button" class="btn btn-secondary btn-sm">Secondary Small</button>
					<button type="button" class="btn btn-info btn-xs">Info Extra Small</button>
				</div>
            </div>
            <!-- /.box -->
          </div>
		
		  <div class="box">
            <div class="box-header">
              <h4 class="box-title">Flat Buttons</h4>
			  <p class="subtitle mb-0">Using the base class <code>.btn</code> <code>.btn-flat</code></p>
            </div>
            <div class="box-body">
				<div class="clearfix">
					<button type="button" class="btn btn-default btn-flat">Default</button>
					<button type="button" class="btn btn-primary btn-flat">Primary</button>
					<button type="button" class="btn btn-secondary btn-flat">Secondary</button>
					<button type="button" class="btn btn-info btn-flat">Info</button>
					<button type="button" class="btn btn-success btn-flat">Success</button>
					<button type="button" class="btn btn-danger btn-flat">Danger</button>
					<button type="button" class="btn btn-warning btn-flat">Warning</button>
				</div>
            </div>
            <!-- /.box -->
          </div>
		
		  <div class="box">
            <div class="box-header">
              <h4 class="box-title">Button with icon</h4>
			  <p class="subtitle mb-0">Using the base class <code>.btn</code> <code>i class ="fa fa-check</code></p>
            </div>
            <div class="box-body">
				<div class="clearfix">
					<button type="button" class="btn btn-default"><i class="fa fa-check"></i> Default</button>
					<button type="button" class="btn btn-primary"><i class="fa fa-check"></i> Primary</button>
					<button type="button" class="btn btn-secondary"><i class="fa fa-check"></i> Secondary</button>
					<button type="button" class="btn btn-info"><i class="fa fa-check"></i> Info</button>
					<button type="button" class="btn btn-success"><i class="fa fa-check"></i> Success</button>
					<button type="button" class="btn btn-danger"><i class="fa fa-check"></i> Danger</button>
					<button type="button" class="btn btn-warning"><i class="fa fa-check"></i> Warning</button>
				</div>
            </div>
            <!-- /.box -->
          </div>
		
		  <div class="box">
            <div class="box-header">
              <h4 class="box-title">Split buttons</h4>
            </div>
            <div class="box-body">
				<div class="clearfix">
					<div class="btn-group">
					  <button type="button" class="btn btn-default">Default</button>
					  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
						<span class="caret"></span>
						<span class="sr-only">Toggle Dropdown</span>
					  </button>
					  <div class="dropdown-menu">
						<a class="dropdown-item" href="#">Action</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Separated link</a>
					  </div>
					</div>
					<div class="btn-group">
					  <button type="button" class="btn btn-primary">Primary</button>
					  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
						<span class="caret"></span>
						<span class="sr-only">Toggle Dropdown</span>
					  </button>
					  <div class="dropdown-menu">
						<a class="dropdown-item" href="#">Action</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Separated link</a>
					  </div>
					</div>
					<div class="btn-group">
					  <button type="button" class="btn btn-secondary">Secondary</button>
					  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
						<span class="caret"></span>
						<span class="sr-only">Toggle Dropdown</span>
					  </button>
					  <div class="dropdown-menu">
						<a class="dropdown-item" href="#">Action</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Separated link</a>
					  </div>
					</div>
					<div class="btn-group">
					  <button type="button" class="btn btn-info">Info</button>
					  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
						<span class="caret"></span>
						<span class="sr-only">Toggle Dropdown</span>
					  </button>
					  <div class="dropdown-menu">
						<a class="dropdown-item" href="#">Action</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Separated link</a>
					  </div>
					</div>
					<div class="btn-group">
					  <button type="button" class="btn btn-success">Success</button>
					  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
						<span class="caret"></span>
						<span class="sr-only">Toggle Dropdown</span>
					  </button>
					  <div class="dropdown-menu">
						<a class="dropdown-item" href="#">Action</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Separated link</a>
					  </div>
					</div>
					<div class="btn-group">
					  <button type="button" class="btn btn-danger">Danger</button>
					  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
						<span class="caret"></span>
						<span class="sr-only">Toggle Dropdown</span>
					  </button>
					  <div class="dropdown-menu">
						<a class="dropdown-item" href="#">Action</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Separated link</a>
					  </div>
					</div>
					<div class="btn-group">
					  <button type="button" class="btn btn-warning">Warning</button>
					  <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
						<span class="caret"></span>
						<span class="sr-only">Toggle Dropdown</span>
					  </button>
					  <div class="dropdown-menu">
						<a class="dropdown-item" href="#">Action</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Separated link</a>
					  </div>
					</div>
				</div>
            </div>
            <!-- /.box -->
          </div>
		
		  <div class="box">
            <div class="box-header">
              <h4 class="box-title">Button with Dropdown</h4>
            </div>
            <div class="box-body">
				<div class="clearfix">
					<div class="btn-group">
					  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default</button>
					  <div class="dropdown-menu">
						<a class="dropdown-item" href="#">Action</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Separated link</a>
					  </div>
					</div>
					<div class="btn-group">
					  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary</button>
					  <div class="dropdown-menu">
						<a class="dropdown-item" href="#">Action</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Separated link</a>
					  </div>
					</div>
					<div class="btn-group">
					  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Secondary</button>
					  <div class="dropdown-menu">
						<a class="dropdown-item" href="#">Action</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Separated link</a>
					  </div>
					</div>
					<div class="btn-group">
					  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info</button>
					  <div class="dropdown-menu">
						<a class="dropdown-item" href="#">Action</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Separated link</a>
					  </div>
					</div>
					<div class="btn-group">
					  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success</button>
					  <div class="dropdown-menu">
						<a class="dropdown-item" href="#">Action</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Separated link</a>
					  </div>
					</div>
					<div class="btn-group">
					  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger</button>
					  <div class="dropdown-menu">
						<a class="dropdown-item" href="#">Action</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Separated link</a>
					  </div>
					</div>
					<div class="btn-group">
					  <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning</button>
					  <div class="dropdown-menu">
						<a class="dropdown-item" href="#">Action</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Separated link</a>
					  </div>
					</div>
				</div>
            </div>
            <!-- /.box -->
          </div>
		
		  <div class="box">
            <div class="box-header">
              <h4 class="box-title">Horizontal Button Group</h4>
			  <p class="subtitle mb-0">Horizontal button groups are easy to create with bootstrap. Just add your buttons inside <code>&lt;div class="btn-group"&gt;&lt;/div&gt;</code></p>
            </div>
            <div class="box-body">
				<div class="clearfix">
					<div class="btn-group">
					  <button type="button" class="btn btn-info">Left</button>
					  <button type="button" class="btn btn-info">Middle</button>
					  <button type="button" class="btn btn-info">Right</button>
					</div>
					<div class="btn-group">
					  <button type="button" class="btn btn-success"><i class="fa fa-align-left"></i></button>
					  <button type="button" class="btn btn-success"><i class="fa fa-align-center"></i></button>
					  <button type="button" class="btn btn-success"><i class="fa fa-align-right"></i></button>
					</div>					
					<div class="btn-group">
					  <button type="button" class="btn btn-warning">1</button>
					  <button type="button" class="btn btn-warning">2</button>

					  <div class="btn-group">
						<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
						</button>
						  <div class="dropdown-menu">
							<a class="dropdown-item" href="#">Action</a>
							<a class="dropdown-item" href="#">Another action</a>
							<a class="dropdown-item" href="#">Something else here</a>
							<div class="dropdown-divider"></div>
							<a class="dropdown-item" href="#">Separated link</a>
						  </div>
					  </div>
					</div>
				</div>
            </div>
            <!-- /.box -->
          </div>
		
		  <div class="box">
            <div class="box-header">
              <h4 class="box-title">Vertical Button Group</h4>
			  <p class="subtitle mb-0">Vertical button groups are easy to create with bootstrap. Just add your buttons inside <code>&lt;div class="btn-group-vertical"&gt;&lt;/div&gt;</code></p>
            </div>
            <div class="box-body">
				<div class="clearfix">
					<div class="btn-group-vertical">
					  <button type="button" class="btn btn-info">Left</button>
					  <button type="button" class="btn btn-info">Middle</button>
					  <button type="button" class="btn btn-info">Right</button>
					</div>
					<div class="btn-group-vertical">
					  <button type="button" class="btn btn-success"><i class="fa fa-align-left"></i></button>
					  <button type="button" class="btn btn-success"><i class="fa fa-align-center"></i></button>
					  <button type="button" class="btn btn-success"><i class="fa fa-align-right"></i></button>
					</div>					
					<div class="btn-group-vertical">
                      <button type="button" class="btn btn-danger">1</button>
                      <button type="button" class="btn btn-danger">2</button>

                      <div class="btn-group">
                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                          <i class="fa fa-caret-down"></i>
                        </button>
                          <div class="dropdown-menu">
							<a class="dropdown-item" href="#">Action</a>
							<a class="dropdown-item" href="#">Another action</a>
							<a class="dropdown-item" href="#">Something else here</a>
							<div class="dropdown-divider"></div>
							<a class="dropdown-item" href="#">Separated link</a>
						  </div>
                      </div>
                    </div>
				</div>
            </div>
            <!-- /.box -->
          </div>
		
		  <div class="box">
            <div class="box-header">
              <h4 class="box-title">Social buttons Icon with Name</h4>
			  <p class="subtitle mb-0">Use a classes <code>btn btn-social btn-bitbucket /  &lt; class="fa fa-bitbucket"&gt;&lt;/i&gt;</code> to quickly create a General btn.</p>
            </div>
            <div class="box-body">
				<div class="clearfix">					
				  <button class="btn btn-social btn-bitbucket mb-5">
					<i class="fa fa-bitbucket"></i> Sign in with Bitbucket
				  </button>
				  <button class="btn btn-social btn-dropbox mb-5">
					<i class="fa fa-dropbox"></i> Sign in with Dropbox
				  </button>
				  <button class="btn btn-social btn-facebook mb-5">
					<i class="fa fa-facebook"></i> Sign in with Facebook
				  </button>
				  <button class="btn btn-social btn-flickr mb-5">
					<i class="fa fa-flickr"></i> Sign in with Flickr
				  </button>
				  <button class="btn btn-social btn-foursquare mb-5">
					<i class="fa fa-foursquare"></i> Sign in with Foursquare
				  </button>
				  <button class="btn btn-social btn-github mb-5">
					<i class="fa fa-github"></i> Sign in with GitHub
				  </button>
				  <button class="btn btn-social btn-google mb-5">
					<i class="fa fa-google-plus"></i> Sign in with Google
				  </button>
				  <button class="btn btn-social btn-instagram mb-5">
					<i class="fa fa-instagram"></i> Sign in with Instagram
				  </button>
				  <button class="btn btn-social btn-linkedin mb-5">
					<i class="fa fa-linkedin"></i> Sign in with LinkedIn
				  </button>
				  <button class="btn btn-social btn-tumblr mb-5">
					<i class="fa fa-tumblr"></i> Sign in with Tumblr
				  </button>
				  <button class="btn btn-social btn-twitter mb-5">
					<i class="fa fa-twitter"></i> Sign in with Twitter
				  </button>
				  <button class="btn btn-social btn-vk mb-5">
					<i class="fa fa-vk"></i> Sign in with VK
				  </button>
				</div>
            </div>
            <!-- /.box -->
          </div>
		
		  <div class="box">
            <div class="box-header">
              <h4 class="box-title">Social buttons Icon</h4>
			  <p class="subtitle mb-0">Use a classes <code>btn btn-social-icon btn-bitbucket</code> to quickly create a General btn.</p>
            </div>
            <div class="box-body">
				<div class="clearfix">
					<button class="btn btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></button>
					<button class="btn btn-social-icon btn-dropbox"><i class="fa fa-dropbox"></i></button>
					<button class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></button>
					<button class="btn btn-social-icon btn-flickr"><i class="fa fa-flickr"></i></button>
					<button class="btn btn-social-icon btn-foursquare"><i class="fa fa-foursquare"></i></button>
					<button class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></button>
					<button class="btn btn-social-icon btn-google"><i class="fa fa-google-plus"></i></button>
					<button class="btn btn-social-icon btn-instagram"><i class="fa fa-instagram"></i></button>
					<button class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></button>
					<button class="btn btn-social-icon btn-tumblr"><i class="fa fa-tumblr"></i></button>
					<button class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></button>
					<button class="btn btn-social-icon btn-vk"><i class="fa fa-vk"></i></button>
				</div>
            </div>
            <!-- /.box -->
          </div>
		
		  <div class="box">
            <div class="box-header">
              <h4 class="box-title">Social Icon With Circle buttons</h4>
			  <p class="subtitle mb-0">Use a classes <code>btn btn-social-icon btn-circle</code> to quickly create a General btn.</p>
            </div>
            <div class="box-body">
				<div class="clearfix">
					<button class="btn btn-social-icon btn-circle btn-bitbucket"><i class="fa fa-bitbucket"></i></button>
					<button class="btn btn-social-icon btn-circle btn-dropbox"><i class="fa fa-dropbox"></i></button>
					<button class="btn btn-social-icon btn-circle btn-facebook"><i class="fa fa-facebook"></i></button>
					<button class="btn btn-social-icon btn-circle btn-flickr"><i class="fa fa-flickr"></i></button>
					<button class="btn btn-social-icon btn-circle btn-foursquare"><i class="fa fa-foursquare"></i></button>
					<button class="btn btn-social-icon btn-circle btn-github"><i class="fa fa-github"></i></button>
					<button class="btn btn-social-icon btn-circle btn-google"><i class="fa fa-google-plus"></i></button>
					<button class="btn btn-social-icon btn-circle btn-instagram"><i class="fa fa-instagram"></i></button>
					<button class="btn btn-social-icon btn-circle btn-linkedin"><i class="fa fa-linkedin"></i></button>
					<button class="btn btn-social-icon btn-circle btn-tumblr"><i class="fa fa-tumblr"></i></button>
					<button class="btn btn-social-icon btn-circle btn-twitter"><i class="fa fa-twitter"></i></button>
					<button class="btn btn-social-icon btn-circle btn-vk"><i class="fa fa-vk"></i></button>
				</div>
            </div>
            <!-- /.box -->
          </div>
		
		  <div class="box">
            <div class="box-header">
              <h4 class="box-title">Application Buttons</h4>
			  <p class="subtitle mb-0">Add the classes <code>.btn.btn-app</code> to an <code>&lt;a&gt;</code> tag to achieve the following:</p>
            </div>
            <div class="box-body">
				<div class="clearfix">
					  <a class="btn btn-app btn-info" href="#">
						<i class="fa fa-edit"></i> Edit
					  </a>
					  <a class="btn btn-app btn-success" href="#">
						<i class="fa fa-play"></i> Play
					  </a>
					  <a class="btn btn-app btn-secondary" href="#">
						<i class="fa fa-pause"></i> Pause
					  </a>
					  <a class="btn btn-app btn-primary" href="#">
						<i class="fa fa-stop"></i> Stop
					  </a>
					  <a class="btn btn-app btn-warning" href="#">
						<i class="fa fa-repeat"></i> Repeat
					  </a>
					  <a class="btn btn-app btn-danger" href="#">
						<i class="fa fa-save"></i> Save
					  </a>
					  <a class="btn btn-app btn-danger" href="#">
						<span class="badge bg-yellow">12</span>
						<i class="fa fa-bullhorn"></i> Notifications
					  </a>
					  <a class="btn btn-app btn-warning" href="#">
						<span class="badge bg-purple">41</span>
						<i class="fa fa-users"></i> Users
					  </a>
					  <a class="btn btn-app btn-primary" href="#">
						<span class="badge bg-teal">45</span>
						<i class="fa fa-inbox"></i> Orders
					  </a>
					  <a class="btn btn-app btn-success" href="#">
						<span class="badge bg-aqua">2</span>
						<i class="fa fa-envelope"></i> Inbox
					  </a>
					  <a class="btn btn-app btn-danger" href="#">
						<span class="badge bg-green">48</span>
						<i class="fa fa-barcode"></i> Products
					  </a>
					  <a class="btn btn-app btn-info" href="#">
						<span class="badge bg-red">31</span>
						<i class="fa fa-heart-o"></i> Likes
					  </a>
				</div>
            </div>
            <!-- /.box -->
          </div>
		
		  <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">Button Addon</h3>
            </div>
            <div class="box-body">
              <p>With dropdown</p>

              <div class="input-group margin">
                <div class="input-group-btn">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action</button>
                  <div class="dropdown-menu">
					<a class="dropdown-item" href="#">Action</a>
					<a class="dropdown-item" href="#">Another action</a>
					<a class="dropdown-item" href="#">Something else here</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="#">Separated link</a>
				  </div>
                </div>
                <!-- /btn-group -->
                <input type="text" class="form-control">
              </div>
              <!-- /input-group -->
              <p>Normal</p>

              <div class="input-group margin">
                <div class="input-group-btn">
                  <button type="button" class="btn btn-danger">Action</button>
                </div>
                <!-- /btn-group -->
                <input type="text" class="form-control">
              </div>
              <!-- /input-group -->
              <p>Flat</p>

              <div class="input-group margin">
                <input type="text" class="form-control">
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-info btn-flat">Go!</button>
                    </span>
              </div>
              <!-- /input-group -->
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
      
    </section>
    <!-- /.content -->
  </div>
  
</div>

	<!-- jQuery 3 -->
	<script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>
	
	<!-- popper -->
	<script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>

	<!-- Bootstrap 4.0-->
	<script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
	
	<!-- SlimScroll -->
	<script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>

	<!-- FastClick -->
	<script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>

	<!-- 洲博通 App -->
	<script src="../../js/template.js"></script>

	<!-- 洲博通 for demo purposes -->
	<script src="../../js/demo.js"></script>
	
</body>
</html>
